﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>测试一个路由对应多个组件</title>
  </head>
  <body>
    <style>
      #app {
        text-align: center;
      }
      .container {
        background-color: #73ffd6;
        margin-top: 20px;
        height: 100px;
      }
    </style>
    <div id="app">
      <router-view></router-view>
      <div id="container">
        <router-view></router-view>
        <router-view></router-view>
      </div>
    </div>
    <template id="sidebar">
      <div class="sidebar">侧边栏内容</div>
    </template>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <!--引入Vue Router-->
    <script src="https://unpkg.com/vue-router@next"></script>
    <script>
      const header = { template: '<div class="header"> 头部内容 </div>' }
      const sidebar = { template: '#sidebar' }
      const main = { template: '<div class="main">主要内容</div>' }

      const routes = [
        { path: '/', component: header },
        { path: '/', component: sidebar },
        { path: '/', component: main }
      ]

      const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes
      })
      const vm = Vue.createApp({})
      vm.use(router)
      vm.mount('#app')
    </script>
  </body>
</html>
